<template>
  <img
    :src="`${VITE_SITE_URL}/wechat/miniprogram/static/login_box_gb2.png`"
    alt=""
    class="page-bg"
  />
  <view class="page-content">
    <view class="login-enter">
      <img
        :src="`${VITE_SITE_URL}/wechat/miniprogram/static/logo.png`"
        class="logo-img"
      />
      <view class="system-name">{{ VITE_APP_TITLE }}</view>
      <view>
        <u-button
          type="success"
          shape="circle"
          @click="wxlogin"
          :custom-style="customStyle"
          ><u-icon name="weixin-fill" size="36" class="u-m-r-20"></u-icon
          >微信登录</u-button
        >
      </view>
      <view class="u-m-t-60">
        <u-button
          type="primary"
          shape="circle"
          :custom-style="customStyle"
          @click="gotoclick('account')"
        >
          <u-icon name="account-fill" size="32" class="u-m-r-20"></u-icon>
          账号登录</u-button
        >
      </view>
      <view class="u-m-t-60">
        <u-button
          shape="circle"
          :custom-style="smsButtonStyle"
          @click="gotoclick('sms')"
        >
          <u-icon name="chat-fill" size="32" class="u-m-r-20"></u-icon>
          短信登录</u-button
        >
      </view>
      <!-- <view class="u-m-t-40">
        <u-button shape="circle" @click="registry">注册</u-button>
      </view> -->
    </view>
    <!-- <view class="forget-pswd">忘记密码？</view> -->
  </view>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/stores/user';
import { onLoad } from '@dcloudio/uni-app';
import { getEnvValue } from '@/utils/env';

import { disConnect } from '@/hooks/socket';
const { VITE_APP_TITLE, VITE_SITE_URL, VITE_APPID } = getEnvValue<any>([
  'VITE_APP_TITLE',
  'VITE_SITE_URL',
  'VITE_APPID',
]);

const userStore = useUserStore();

const gotoclick = (name: any, type = 'push') => {
  if (type === 'push') {
    (uni as any).$Router.push({
      name,
    });
  } else {
    (uni as any).$Router.switchTab({
      name,
    });
  }
};
const registry = () => {};
const menuButtonTop = ref('0px');
const customStyle = ref({
  height: '100rpx',
});
const smsButtonStyle = ref({
  height: '100rpx',
  background: 'rgba(0,48,128,0.3)',
  borderColor: '#f00',
  color: '#fff',
});
const getCapsule = () => {
  //获取胶囊位置并改变顶部自定义导航栏的位置
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  //让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
  menuButtonTop.value = menuButtonInfo.top + 'px';
};

const wxlogin = () => {
  uni.showLoading({
    title: '登录中',
  });
  wx.login({
    success(code: any) {
      enterLogin(code);
    },
  });
};
const enterLogin = async (code: any) => {
  try {
    await userStore.login({
      ...toRaw({
        grant_type: 'wechat',
        appid: VITE_APPID,
        code: code.code,
      }),
    });
    uni.showToast({
      title: '登录成功',
      icon: 'none',
      duration: 2000,
    });
    // 获取地址里面的重定向地址
    gotoclick('home', 'switchTab');
  } catch (err: any) {
    console.log(err, 'errr');
    if (err.data.error === '微信登录不存在用户') {
      uni.$Router.push({
        name: 'account',
      });
    }
  }
};

onLoad(() => {
  // if (uni.getStorageSync('Token')) {
  getCapsule();
  uni.clearStorageSync();
  // 进入登录页面，清掉websocket
  disConnect();
  //   wxlogin();
  // }
});
</script>
<style lang="scss">
page {
  width: 100%;
  height: 100%;
}
.page-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}
.page-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.text-white {
  color: #fff;
}
.system-name {
  // width: 100%;
  // position: absolute;
  // top: 80rpx;
  // left: 0;
  margin-bottom: 200rpx;
  text-align: center;
  font-size: 36rpx;
  font-weight: bolder;
  color: $u-main-color;
}
.logo-img {
  width: 206rpx;
  height: 146rpx;
  display: block;
  margin: 0 auto;
  margin-bottom: 20rpx;
}
.login-enter {
  // height: 450rpx;
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  padding: 0 100rpx;
  transform: translateY(-50%);
}
.forget-pswd {
  width: 100%;
  position: absolute;
  bottom: calc(40rpx + env(safe-area-inset-bottom));
  left: 0;
  text-align: center;
  color: #fff;
}
</style>
